<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>个人信息</title>
</head>

<body class="bg-gray-100 font-sans min-h-screen py-10 px-4">
<div class="max-w-3xl mx-auto">
    <!-- 成功返回数据 -->
    <div th:if="${result.code == 1}">
        <!-- 用户基本信息卡片 -->
        <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
            <div class="p-6 border-b border-gray-200 bg-blue-50">
                <h1 class="text-2xl font-bold text-gray-800">用户资料</h1>
            </div>

            <div class="flex flex-col md:flex-row p-6 gap-6 items-center">
                <!-- 用户头像 -->
                <img th:src="${result.data.authorAvatar}"
                     alt="用户头像"
                     class="w-32 h-32 rounded-full object-cover shadow-md">

                <!-- 用户名和真实姓名 -->
                <div class="text-center md:text-left">
                    <h2 class="text-xl font-semibold text-gray-800" th:text="${result.data.nickname}">用户昵称</h2>
                    <p class="text-gray-600 mt-1" th:text="${result.data.realname}">真实姓名</p>
                </div>
            </div>
        </div>

        <!-- 联系方式 -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-800">联系方式</h2>
            </div>
            <ul class="p-4 space-y-3">
                <li class="flex items-center gap-3">
                    <i class="fa-solid fa-envelope text-blue-500"></i>
                    <span class="text-gray-700" th:text="${result.data.email}">邮箱</span>
                </li>
                <li class="flex items-center gap-3">
                    <i class="fa-solid fa-phone text-green-500"></i>
                    <span class="text-gray-700" th:text="${result.data.phone}">手机</span>
                </li>
                <li class="flex items-center gap-3">
                    <i class="fa-brands fa-qq text-indigo-500"></i>
                    <span class="text-gray-700" th:text="${result.data.qq}">QQ</span>
                </li>
            </ul>
        </div>

        <!-- 个人详细信息 -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-800">个人信息</h2>
            </div>
            <div class="p-4 space-y-3">
                <p class="text-gray-700" th:text="'工作：' + ${result.data.work}">工作信息</p>
                <p class="text-gray-700" th:text="'地址：' + ${result.data.address}">详细地址</p>
                <p class="text-gray-700" th:text="'爱好：' + ${result.data.hobby}">个人爱好</p>
            </div>
        </div>

        <!-- 自我介绍 -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
            <div class="p-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-800">自我介绍</h2>
            </div>
            <div class="p-4">
                <p class="text-gray-700" th:text="${result.data.intro}">这是一段自我介绍。</p>
            </div>
        </div>

        <!-- 编辑按钮 -->
        <div class="mt-6 text-center">
            <a href="/user/info/edit"
               class="inline-block bg-green-600 hover:bg-green-700 text-white font-medium px-6 py-2 rounded transition duration-300">
                <i class="fas fa-edit mr-1"></i> 修改信息
            </a>
        </div>
    </div>

    <!-- 数据获取失败 -->
    <div th:unless="${result.code == 1}"
         class="bg-red-100 border border-red-400 text-red-700 px-6 py-4 rounded relative text-center">
        <strong class="font-bold">错误！</strong>
        <span class="block sm:inline" th:text="${result.msg}">无法加载用户信息</span>
    </div>
</div>


</body>
</html>
